<!--
 * @description  : 市管-日计划终止审批列表
 * @descriptionDetail: 市管-日计划终止审批列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-06 18:57:44
-->
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <u-dropdown class="u-dropdown" ref="searchDropDown" @open="handlerOpen" @close="handlerClose">
      <u-dropdown-item title="组织" :options="[]" v-model="searchData.orgUuid" @change="handlerChangeItem"></u-dropdown-item>		
      <u-dropdown-item title="计划类型" :options="dayPlanTypeList" v-model="searchData.dayPlanType" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="审批状态" :options="approvalStatusList" v-model="searchData.approvalStatus" @change="handlerChangeItem"></u-dropdown-item>
      <u-dropdown-item title="日期">
        <view class="slot-content">
          <view class="item-box">
            <u-input
              placeholder="请选择开始时间"
              :disabled="true"
              :clearable="false"
              v-model="searchData.planDateStart"
              @click="()=>{clicDatekHandle('isShowPlanDateS')}"
            />
            <text class="txt-sty">
              -
            </text>
            <u-input
              placeholder="请选择结束时间"
              :disabled="true"
              :clearable="false"
              v-model="searchData.planDateEnd"
              @click="()=>{clicDatekHandle('isShowPlanDateE')}"
            />
          </view>
          <u-button type="primary" @click="handlerCount">
            确定
          </u-button>
        </view>
      </u-dropdown-item>
    </u-dropdown>
    <me-table 
      :i="0"
      :top="5"
      :index="0"
      :load-data="loadData"
      ref="mescrollItem0"
    > 
      <view slot-scope="d">
        <u-row style="border-bottom: 1px solid #e5e5e5; padding: 5px 0px;">
          <u-col span="12">
            <day-plan-stop-item :plan="d.data"></day-plan-stop-item>
          </u-col>
        </u-row>
      </view>
    </me-table>
    <!-- 组织机构选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgSelectShow" @close="handlerCloseOrg">
      <org-select :cleanParentOrg="true" :isHybrid="true" limitNodeType="all" treeType="zm-all" @choose="handlerChooseOrg"></org-select>
    </u-popup>
    <u-picker mode="date" :max-date="maxDate" v-model="isShowPlanDateS" @confirm="changeDate('planDateStart',$event)">
    </u-picker>
    <u-picker mode="date" :max-date="maxDate" v-model="isShowPlanDateE" @confirm="changeDate('planDateEnd',$event)">
    </u-picker>
  </view>
</template>

<script> 
import MeTable from '@/components/me-table.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import OrgSelect from "@/components/org-select.vue"
import checkService from "@/service/check/check.service"
import {dateUtils,} from "@/common/util"
import DayPlanStopItem from './components/day-plan-stop-item.vue';
export default {
  components: { 
    MeTable,
    DayPlanStopItem,
    OrgSelect,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      orgSelectShow: false,
      searchData: {   // 查询参数
        orgUuid: "",
        approvalStatus: "02",
        dayPlanType: "",
        planDateStart: "",
        planDateEnd:"",
      },
      dayPlanTypeList: [],
      approvalStatusList: [],
      isShowPlanDateS:false,
      isShowPlanDateE:false,
      maxDate: '2099-12-31',
    };
  },
  onLoad() {
    
  },
  created () {
    this.dayPlanTypeList = this.$store.state.dicts['M_DAY_PLAN_TYPE'];
    this.approvalStatusList = this.$store.state.dicts['M_DAY_PLAN_APPROVAL_STATUS'];
  },
  methods: {
    handlerSearch() {
      this.$refs['mescrollItem0'].refresh();
    },
    clicDatekHandle(type) {
      this[type] = true;
    },
    changeDate(type, e) {
      this.searchData[type] = this.$u.date(e.timestamp, 'yyyy-mm-dd');
    },
    handlerOpen(idx) {
      // 组织机构 0
      idx == 0 && (this.orgSelectShow = true);
    },
    handlerClose(idx) {
      this.orgSelectShow = false;
    },
    handlerChooseOrg(orgs) {
      if (orgs.length == 0) {
        this.$u.toast("请选择组织机构");
        return;
      }
      this.searchData.orgUuid = orgs[0].id;
      // this.orgSelectShow = false;
      this.$refs.searchDropDown.close();
      this.handlerSearch();
    },
    handlerCloseOrg() {
      this.$refs.searchDropDown.close();
    },
    // 选择搜索条件项
    handlerChangeItem() {
      console.log(this.searchData);
      this.handlerSearch();
    },
    // 填写日期
    handlerCount(){
      this.$refs.searchDropDown.close();
      this.handlerSearch();
    },
    updateBackState(p){
      if(p.refresh) this.handlerSearch();
    },
    // 列表查询数据
    loadData(page) {
      // 调用后台接口查询数据：分页参数page.size, page.num
      return checkService.findDayPlanTerminationList({page:page.num, limit: page.size, ...this.searchData,});
    },
  },
};
</script>

<style lang="scss" scoped>
.sticky-header {
  background-color: #fff;
  position: fixed;
  /* #ifdef H5-DINGDING  */
  top: 0px;
  /* #endif */
  /* #ifndef H5-DINGDING  */
  top: 44px;
  /* #endif */
  width: 100%;
  height: 40px;
  z-index: 999;
}

.slot-content {
  background-color: #FFFFFF;
  padding: 24rpx;	
  .item-box {
    margin-bottom: 50rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   }
}
.txt-sty{
  line-height: 60px;
  padding: 0 10px;
}
</style>
